<template>
  <div>
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-date-picker
            :picker-options="pickerOptions"
            style="width: 300px"
            :clearable="false"
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="浏览开始日期"
            @change="change"
            value-format="yyyy-MM-dd"
            end-placeholder="浏览结束日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="getList()">查询</el-button></el-col
        >
      </el-row>
      <rz-height></rz-height>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="LicenseNo"
          label="统一社会信用代码"
        ></el-table-column>
        <el-table-column prop="MarketName" label="单位名称">
          <template slot-scope="scope">
            <div class="active" @click="detail(scope.row.LicenseNo)">
              {{ scope.row.MarketName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="Contactor"
          label="单位联系人"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="ContactTel"
          label="负责人电话"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="Mobile"
          label="浏览人电话"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="CreateDateTime"
          label="浏览日期"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="tCount"
          label="浏览次数"
          width="80"
        ></el-table-column>
      </el-table>

      <pagination
        :total="total"
        :page.sync="query.page"
        @pagination="getList"
        v-show="total"
      />
    </el-card>

    <el-dialog
      title="登录"
      :visible.sync="dialogVisible"
      width="400px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form ref="form" :model="form" label-width="0" :rules="rules">
        <el-form-item prop="mobile">
          <el-input
            v-model="form.mobile"
            maxlength="11"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="cipher">
          <el-input
            v-model="form.cipher"
            type="password"
            placeholder="请输入密码"
            maxlength="18"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit" style="width: 100%"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="查看详情"
      :visible.sync="active"
      width="80%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="浏览记录" name="1">
          <el-table :data="tableList" border style="width: 100%">
            <el-table-column
              prop="LicenseNo"
              label="统一社会信用代码"
            ></el-table-column>
            <el-table-column prop="MarketName" label="单位名称">
            </el-table-column>
            <el-table-column
              prop="Contactor"
              label="单位联系人"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="ContactTel"
              label="负责人电话"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="Mobile"
              label="浏览人电话"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="CreateDateTime"
              label="浏览日期"
              width="200"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="开票记录" name="2">
  <el-row :gutter="20">
        <el-col :span="6">
         <el-date-picker
      v-model="query.date"
      :clearable="false"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="Page=1;SingSalesListM()">查询</el-button></el-col
        >
      </el-row>
      <rz-height></rz-height>
      <el-table :data="tableList1" border style="width: 100%">
        <el-table-column
          prop="SellerTime"
          label="销售日期"
             width="180"
        ></el-table-column>
      
        <el-table-column
          prop="SubItemName"
          label="品种"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="Company"
          label="数量"
          width="180"
        >
        <template slot-scope="scope">
            <div>
              {{ scope.row.Weight }} {{ scope.row.Company }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="BuyerMarketName"
          label="采购单位名称"
        ></el-table-column>
      </el-table>

   <pagination
        :total="total1"
        :page.sync="Page"
        @pagination="SingSalesListM"
        v-show="total1"
      />
        </el-tab-pane>
        <el-tab-pane label="执照信息" name="3">
          <el-form ref="form" :model="licenseData" label-width="150px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="统一社会信用代码">
                  {{ licenseData.LicenseNo }}
                </el-form-item>
              </el-col>
               <el-col :span="12"
                ><el-form-item label="名称">
                  {{ licenseData.MarketName }}
                </el-form-item></el-col
              >
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="类型">
                  {{ licenseData.MarketType }}
                </el-form-item></el-col
              >
              <el-col :span="12"
                ><el-form-item label="法定代表人">
                  {{ licenseData.legal }}
                </el-form-item></el-col
              >
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12"
                ><el-form-item label="单位类别">
                  {{ licenseData.RefName }}
                </el-form-item></el-col
              >    <el-col :span="12"
                ><el-form-item label="登记机关">
                  {{ licenseData.RegUnit }}
                </el-form-item></el-col
              >
            </el-row>
            <el-row :gutter="20">
          
              <el-col :span="12">
                <el-form-item label="经营场所">
                  {{ licenseData.Address }}
                </el-form-item></el-col
              >
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="经营范围">
                  {{ licenseData.SalesItems }}
                </el-form-item></el-col
              >
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <!-- <pagination
        :total="total1"
        @pagination="activeList"
        :page.sync="sendQuery.pageIndex"
      /> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="active = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  landSupplierPromotionForm,
  GetHistory,
} from "@/api/modules/enterprise";
import Vue from "vue";
export default {
  // props:[],
  // 页面加载
  created() {
    // this.getList();
    if (this.$formValidate && this.$formValidate.mobile) {
      this.dialogVisible = false;
      landSupplierPromotionForm({
        params: this.$formValidate,
      }).then((res) => {
        this.getList();
      });
    }
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      activeName: "1",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      query: {
        access_token: "c3puY3A=",
        start_time: this.$moment().subtract(30, "day").format("YYYY-MM-DD"),
        end_time: this.$moment().format("YYYY-MM-DD"),
        page: 1,
        pagesize: 10,
        LicenseNo: "",
        licenseNo: "",
        date: this.$moment().format("YYYY-MM-DD")
      },
      Page:1,
      PageSize:10,
      tableData: [],
      dialogVisible: true,
      total: 0,
      form: {
        mobile: "",
        cipher: "",
      },
      rules: {
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        cipher: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      value1: [
        this.$moment().subtract(30, "day").format("YYYY-MM-DD"),
        this.$moment().format("YYYY-MM-DD"),
      ],
      active: false,
      tableList: [],
      total1: 0,
      licenseData: {},
      tableList1:[]
    };
  },
  // 方法
  methods: {
    getList() {
      landSupplierPromotionForm({
        params: this.$formValidate,
      }).then((res) => {
        let dataMapList = [];
        for (let key in this.query) {
          dataMapList.push({
            key,
            value: this.query[key],
          });
        }
        //     wx.$http
        //       .SsaQuickCheck({
        //         dataMapList,
        //         methodName: "getMarketDetails",
        //       })

        GetHistory({
          dataMapList,
          methodName: "GetHistory",
        }).then((res) => {
          this.tableData = res.data;
          this.total = res.totalCount;
        });
      });
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          landSupplierPromotionForm({
            params: this.form,
          }).then((res) => {
            this.$success(res.msg);
            Vue.prototype.$formValidate = this.form;
            this.getList();
            this.dialogVisible = false;
          });
        }
      });
    },
    change(e) {
      if (e) {
        this.query.start_time = e[0];
        this.query.end_time = e[1];
      } else {
        this.query.start_time = "";
        this.query.end_time = "";
      }
    },
    detail(LicenseNo) {
      this.query.LicenseNo = LicenseNo;
      this.query.licenseNo = LicenseNo;

      this.activeList();
      this.SingSalesListM()
      this.active = true;
    },
    activeList() {
      landSupplierPromotionForm({
        params: this.$formValidate,
      }).then((res) => {
        // let dataMapList = [];
        // for (let key in this.query) {
        //   dataMapList.push({
        //     key,
        //     value: this.query[key],
        //   });
        // }
        GetHistory({
           dataMapList: [
            {
              key: "LicenseNo",
              value: this.query.licenseNo,
            },
            {
              key: "access_token",
              value: this.query.access_token,
            },
          ],
          methodName: "GetHistoryList",
        }).then((res) => {
          this.tableList = res.data;
          // this.total1 = res.totalCount;
        });
      });
      landSupplierPromotionForm({
        params: this.$formValidate,
      }).then((res) => {
        //        let dataMapList = [];
        // for (let key in this.query) {
        //   dataMapList.push({
        //     key,
        //     value: this.query[key],
        //   });
        // }
        GetHistory({
          dataMapList: [
            {
              key: "licenseNo",
              value: this.query.licenseNo,
            },
            {
              key: "access_token",
              value: this.query.access_token,
            },
          ],
          methodName: "UnitJBXX",
        }).then((res) => {
          console.log(res);
          this.licenseData = res.data[0];
          // this.tableList = res.data
          // this.total1 = res.totalCount
        });
      });
    },



SingSalesListM(){
  GetHistory({
          dataMapList: [
            {
              key: "licenseNo",
              value: this.query.licenseNo,
            },
 {
              key: "scLinsece",
              value: this.query.licenseNo,
            },
            {
              key: "access_token",
              value: this.query.access_token,
            },
             {
              key: "Page",
              value: this.Page,
            },
             {
              key: "PageSize",
              value: this.PageSize,
            },
             {
              key: "itemcode",
              value: 0,
            },
             {
              key: "year",
              value:  this.$moment(this.query.date).format("YYYY"),
            },
              {
              key: "month",
              value: this.$moment(this.query.date).format("M"),
            },
              {
              key: "day",
              value:  this.$moment(this.query.date).format("D"),
            },
          ],
          methodName: "SingSalesListM",
        }).then((res) => {
          console.log(res);
          this.tableList1=res.data
          this.total1=res.totalCount
          
        });
}






  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>
<style lang="scss" scoped>
.active {
  color: $default;
  text-decoration: underline;
  cursor: pointer;
}
</style>